<script lang="ts" setup>
import { ref, reactive, toRefs } from "vue";

import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";

const state = reactive({
  circleUrl:
    "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
  squareUrl:
    "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
  sizeList: [] as const,
});

const { circleUrl, squareUrl, sizeList } = toRefs(state);
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>
<template>
  <div class="common-layout">
    <el-container style="background: white">
      <div class="left"></div>
      <el-header style="background: #253043">
        <el-icon class="menu"><Menu /></el-icon>
        <el-text class="mx-1" size="large" style="color: aqua">
          健身管理系统</el-text
        >
        <div class="right">
          <!-- 头像框 -->
          <el-row class="demo-avatar demo-basic">
            <el-col :span="12">
              <div class="sub-title"></div>
              <div class="demo-basic--circle">
                <div class="block">
                  <el-avatar :size="50" :src="circleUrl" />
                </div>
                45tw70h
                <div v-for="size in sizeList" :key="size" class="block">
                  <el-avatar :size="size" :src="circleUrl" />
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-header>
      <el-container>
        <!-- //左边菜单 -->

        <!-- 导航栏 -->
        <el-aside width="190px" style="background: #20232b">
          <div
            class="container"
            style="height: 100%; width: 100%; background-color: #253043"
          >
            <el-row class="tac" style="color: white">
              <el-col :span="122">
                <h5 class="mb-2"></h5>
                <el-menu
                  default-active="2"
                  class="el-menu-vertical-demo"
                  @open="handleOpen"
                  @close="handleClose"
                  background-color="#253043"
                >
                  <el-sub-menu index="1">
                    <template #title>
                      <el-icon style="color: aqua"><location /></el-icon>
                      <span class="sub-titleq">预约管理</span>
                    </template>
                    <el-menu-item-group>
                      <el-menu-item index="1-1">课程预约管理</el-menu-item>
                      <el-menu-item index="1-2">预约取消管理</el-menu-item>
                    </el-menu-item-group>
                  </el-sub-menu>
                  <el-menu-item index="2">
                    <el-icon><icon-menu /></el-icon>
                    <routerLink to="/members">
                      <span>管理会员</span></routerLink
                    >
                  </el-menu-item>

                  <el-menu-item index="4">
                    <el-icon><icon-menu /></el-icon>
                    <RouterLink to="/exercises">
                      <span>器材管理</span></RouterLink
                    >
                  </el-menu-item>

                  <el-menu-item index="5">
                    <el-icon><icon-menu /></el-icon>
                    <RouterLink to="/topup"> <span>会员充值</span></RouterLink>
                  </el-menu-item>
                </el-menu>
              </el-col>
            </el-row>
          </div>
        </el-aside>
        <el-main><router-view /></el-main>
      </el-container>
    </el-container>
  </div>
</template>



<style lang="scss" scoped>
* {
  text-decoration: none;
  color: inherit;
}
.common-layout {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.el-container {
  height: 100%;
}
.menu {
  /*竖直方向居中*/
  top: 0;
  bottom: 0;
  /*水平方向居中*/
  left: 0;
  right: 0;
  margin: auto;
  /*行内文本居中*/

  height: 100%;
  line-height: 100%;
}
.mx-1 {
  font-size: 40px;
  margin: auto;
  margin-left: 30px;
  line-height: 10px;
}
.right {
  float: right;
  top: 0;
  bottom: 0;
  /*水平方向居中*/

  left: 0;
  right: 0;
  margin: auto;
  /*行内文本居中*/

  height: 100%;
  line-height: 100%;
}
.bell {
  /*竖直方向居中*/
  top: 0;
  bottom: 0;
  /*水平方向居中*/
  left: 0;
  right: 0;
  margin: auto;
  /*行内文本居中*/
  margin-right: 40px;
  height: 100%;
  line-height: 100%;
}

.demo-basic {
  text-align: center;
}
.demo-basic .sub-title {
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--el-text-color-secondary);
}
.demo-basic .demo-basic--circle,
.demo-basic .demo-basic--square {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.demo-basic .block:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}
.demo-basic .block {
  flex: 1;
}
.demo-basic .el-col:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}
.el-col-12,
.el-col-12.is-guttered {
  margin-top: -5px;
  display: block;
}
.container {
  overflow: hidden;
}
.el-menu-vertical-demo {
  background-color: #253043;
}
.sub-titleq {
  color: aqua;
}
.el-menu-item {
  color: aqua;
}

a:hover {
  color: rgb(204, 32, 161);
  transition: color 0.3s linear;
}
</style>